<script setup>
import { ref, onMounted } from 'vue'
import courseDialog from './components/course-dialog.vue'
import { getCourseList, delCourseList } from '../../api/course'
//渲染
const list = ref([])
const form = ref({
  pageNum: 1,
  pageSize: 10,
  beginCreateTime: '',
  endCreateTime: ''
})
const total = ref(null)
const getCourseListApi = async () => {
  const {data} = await getCourseList(form.value)
  total.value = data.total
  list.value = data.records.records
}
onMounted(() => {
  getCourseListApi() // 挂载调用方法
})
const showDialog = ref(false) //弹框
const addBtn = () => {
  showDialog.value = true
}
//删除
const ids = ref([])
const btnDel = async (id) => {
  ids.value.push(id)
  await delCourseList(ids.value)
  getCourseListApi()
}
//多选
const moreNum = ref(0)
const moreSelect = (val) => {
  val.map((item) => {
    ids.value.push(item.id)
  })
  moreNum.value = val.length
}
//批量删除
const delMoreSubject = async () => {
  await delCourseList(ids.value)
  getCourseListApi()
}
//搜索
const btnSearch = async () => {
  form.value.page = 1
  getCourseListApi()
}
//重置
const resetBtn = () => {
  form.value = {
    pageNum: 1,
    pageSize: form.value.pageSize,
    beginCreateTime: '',
    endCreateTime: ''
  }
  dates.value=''
  getCourseListApi()
}
//编辑
const details = ref('')
const btnEdit = (id) => {
  details.value.getCourseDetailsApi(id)
  showDialog.value = true
}
//分页
const pageChange = (newPage) => {
  form.value.pageNum = newPage
  getCourseListApi()
}
const pageSizeChange = (newPageSize) => {
  form.value.pageSize = newPageSize
  getCourseListApi()
}
//日期选择
const dates = ref()
const dateChange = (value) => {
  form.value.beginCreateTime = value[0]
  form.value.endCreateTime = value[1]
}
</script>
<template>
  <div class="container">
    <div class="container_app">
      <el-form label-position="top">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="课程编号">
              <el-input placeholder="请输入课程编号" size="large" v-model="form.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="课程名称">
              <el-input
                placeholder="请输入课程名称"
                size="large"
                v-model="form.courseName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="适用人群">
              <el-select
                placeholder="请选择适用人群"
                size="large"
                style="width: 300px"
                v-model="form.fetAmount"
              >
                <el-option label="小白学员" value="小白学员"></el-option>
                <el-option label="中级程序员" value="中级程序员"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="dates"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时期"
                end-placeholder="结束日期"
                size="large"
                @change="dateChange"
                :clearable="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="课程学科">
              <el-select
                placeholder="请选择课程学科"
                size="large"
                style="width: 300px"
                v-model="form.subjectName"
              >
                <el-option label="Java" value="Java"></el-option>
                <el-option label="前端" value="前端"></el-option>
                <el-option label="人工智能" value="人工智能"></el-option>
                <el-option label="大数据" value="大数据"></el-option>
                <el-option label="Python" value="Python"></el-option>
                <el-option label="测试" value="测试"></el-option>
                <el-option label="新媒体" value="新媒体"></el-option>
                <el-option label="产品经理" value="产品经理"></el-option>
                <el-option label="UI设计" value="UI设计"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="margin-top: 30px">
            <el-button type="success" round size="large" style="width: 100px" @click="btnSearch"
              >搜索</el-button
            >
            <el-button round size="large" style="width: 100px" @click="resetBtn">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <div class="btnBox">
        <span
          >已选<span style="color: aqua">{{ moreNum }}</span
          >项</span
        >
        <div>
          <el-button size="large" type="warning" round @click="addBtn">添加课程</el-button>
          <el-button size="large" round :disabled="moreNum === 0" @click="delMoreSubject"
            >批量删除</el-button
          >
        </div>
      </div>
      <div class="tableBox">
        <el-table :data="list" @selection-change="moreSelect">
          <el-table-column type="selection" width="40" />
          <el-table-column label="课程编号" prop="code"></el-table-column>
          <el-table-column label="课程学科" prop="subjectName"></el-table-column>
          <el-table-column label="课程名称" prop="courseName"></el-table-column>
          <el-table-column label="价格(元)" prop="price"></el-table-column>
          <el-table-column label="适应人群" prop="fetAmount"></el-table-column>
          <el-table-column label="课程介绍" prop="courseIntro"></el-table-column>
          <el-table-column label="创建时间" sortable prop="createTime" width="170">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" style="color: aquamarine" @click="btnEdit(row.id)"
                >修改</el-button
              >
              <el-button type="text" style="color: red" @click="btnDel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            v-model:current-page="form.pageNum"
            v-model:page-size="form.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="pageChange"
            @size-change="pageSizeChange"
          />
        </el-row>
      </div>
    </div>
  </div>
  <course-dialog
    ref="details"
    v-model:showDialog="showDialog"
    @addSuccess="getCourseListApi()"
  ></course-dialog>
</template>
<style lang="scss" scoped>
.container {
  .container_app {
    padding: 20px;
    background-color: #fff;
  }
  .btnBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
  }
  .tableBox {
    background-color: #fff;
  }
}
</style>
